$font-colorTop: #07a1e4;
$font-colorNav: #f8cc04;
$font-colorOne: #ffd200;
$font-colorTwo: #ea6b3d;
$font-colorThree: #53f2f8;
$backgring-color: #03214b;
$font-sizeSM: 14px;
$font-sizeS: 16px;
$font-sizeM: 18px;
$font-sizeL: 22px;
$font-sizeXL: 30px;

* { margin:0;padding:0;box-sizing:border-box;}
ul {  list-style: none; }
ul > li { display: inline; }

#system {
  width:100%;
  height:100%;
  min-width:1200px;
  min-height:600px;
  overflow:hidden;
  color: #fff;
  position:relative;
  font-family:"Microsoft Yahei", Arial, sans-serif;
  background:rgb(40, 30, 47) url("assets/tmp/img/bi/backgroundKF.png") 0 0 / 100% 100% no-repeat;
}

/* layout */
.margin-t {margin-top: 10px}
.margin-l { margin-left: 20px;}
.pt { padding-top: 15px; }
.logo {width: 228px;height: 72px;}
#content-header { position:relative; height:128px; overflow:hidden;}
.header-times {
  display: flex;
  color: #fff;
  font-size: $font-sizeL;
  text-align: center;
  position: absolute;
  right: 1%;
  margin-top: 5px;

  p {
    width: 26px;
    height: 32px;
    line-height: 32px;
    margin-left: 2px;
    background-color: $backgring-color;
  }
}
.header-icon { position:absolute; top:42px; font-size:$font-sizeL; display: flex}
.header-nav { width: 1634px; background: rgb(11, 36, 72); display: flex;}
.header-top {
  width: 180px;
  text-align: center;
  line-height: 44px;

  p {
    height: 46px;
    color: $font-colorTop;
    font-size: $font-sizeL;
    margin-bottom: 0;
  }
  b {
    font-weight: normal;
    height: 46px;
    font-size: $font-sizeXL;
  }
}
#content-box { position:absolute;top:140px;bottom:0px;left:20px;right:20px;}
#flexCon {
  height:97%;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
.flex-row {
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}
.flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 10px 10px 0px;}
.flex-cell-l{-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
.flex-cell-r {-webkit-flex:2.6;-ms-flex:2.6;flex:2.6; background: url("assets/tmp/img/bi/mgzxD.png") 0 0 / 100% 100% no-repeat;}
.flex-cell-b {-webkit-flex:3;-ms-flex:3;flex:3;}

.chart-wrapper {position:relative;height:100%;}
.vertical { height: 90%; display: flex; flex-direction:column; justify-content: space-between }
.chart-table { position:relative; top: 0; left:2px; display: flex; min-height: 40%;}
.title-table {display: flex; flex-wrap: wrap; min-height: 37%;}

.tab-three-bar {
  width: 100%;
  height: 365px;
  margin-left: 18px;

  .bar-nav {
    display: flex;

    .nav-left {
      margin-top: 10px;
      width: 100px;
      height: 100px;
      position: relative;

      .nav-one {
        font-size: $font-sizeM;
        color: $font-colorThree;
      }
      .nav-two {
        width:15px;
        height:15px;
        background-color: $font-colorOne;
        position: absolute;
        top: 38px;
        left: 75px;
      }
      .nav-the {
        width:15px;
        height:15px;
        background-color: $font-colorTwo;
        position: absolute;
        top: 70px;
        left: 75px;
      }
    }

    .nav-right {
      margin-top: 10px;
      font-size: $font-sizeS;

      .right-back {
        margin-top: 8px;
        width: 100%;
        height: 25px;
        background-color: rgba(7, 174, 247,0.2);
      }

      div {
        display: flex;
      }

      p {
        width: 100px;
        margin-left: 5px;
        color: $font-colorTop;
        margin-bottom: 0px;

      }

      span {
        margin-left: 5px;
        width: 100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
      }

      .span-one {
        color: $font-colorOne;
      }

      .span-two{
        color: $font-colorTwo;
      }
    }
  }

}
.table-background { height: 40%; background-color: rgba(7, 174, 247,0.2); }
.main-copy {text-align: center; font-size:$font-sizeSM; color: $font-colorOne }




/* 1920/1080/1600 分辨率的显示器 */
@media (max-width:1900px) {
  .margin-l { margin-left: 15px;}
  .margin-t { margin-top: 5px;}
  .margin-lc { margin-left: 15px;}
  #content-header { height:123px;}
  .header-times {
    font-size: $font-sizeM;
    p { width: 22px;height: 26px;line-height: 26px; }
  }
  .header-icon {top: 35px}
  .header-nav { width: 1263px;}
  .header-top {
    width: 140px;
    line-height: 40px;

    p {
      height: 44px;
      font-size: 20px;
    }
    b {
      height: 44px;
      font-size: 26px;
    }
  }
  #content-box {top:125px;}
  .chart-title {height:20px;font-size:$font-sizeS;}
  .tab-three-bar { height: 266px;
    .bar-nav {
      .nav-left {width: 80px;height: 80px;
        .nav-one { font-size: $font-sizeS;}
        .nav-two {top: 31px; left: 60px;}
        .nav-the {top: 59px; left: 60px;}
      }
      .nav-right { font-size: 13px;
        .right-back { height: 20px;}
        p { width: 75px;}
        span {width: 75px;height: 20px;line-height: 20px;}
      }
    }
  }
  .main-copy {font-size: 12px;}
}

/*  1440 分辨率的显示器 */
@media screen and (min-width:1400px) and (max-width:1500px) {
  .vertical { height: 100%;}
  .header-nav { width: 1168px;}
  .title-table {min-height: 34%;}
}

/*  1680 分辨率的显示器 */
//@media screen and (min-width:1300px) and (max-width:1400px) {
//  .header-nav { width: 1070px;}
//  .header-top {width: 120px; p{font-size: 19px;} b{font-size: 24px;}}
//}
